<template>
  <div class="material-comp">
    <div class="tags">
      <div
        class="tag-item"
        v-for="(item, index) in types"
        :key="index"
        @click="getUserMaterial(item)"
        :class="{ active: item.value === activeTag }"
      >
        {{ item.label }}
      </div>
    </div>
    <single-video v-if="activeTag === 3" :list="list"></single-video>
    <audio-list v-if="activeTag === 4" :list="list"></audio-list>
    <!-- 特效、建模、图片双瀑布流 -->
    <waterfall v-if="[1, 2, 5].includes(activeTag)" :list="list"></waterfall>
  </div>
</template>

<script>
  import AudioList from 'comp/AudioList.vue';
  import Waterfall from 'comp/Waterfall.vue';
  import SingleVideo from 'comp/SingleVideo.vue';

  export default {
    props: {
      uuid: {
        type: String,
      },
    },
    data() {
      return {
        types: [
          {
            label: '特效',
            value: 1,
          },
          {
            label: '建模',
            value: 2,
          },
          {
            label: '视频',
            value: 3,
          },
          {
            label: '音频',
            value: 4,
          },
          {
            label: '图片',
            value: 5,
          },
        ],
        activeTag: 1,
        list: [],
      };
    },
    components: {
      AudioList,
      Waterfall,
      SingleVideo,
    },
    mounted() {
      this.getUserMaterial();
    },
    methods: {
      getUserMaterial(item) {
        if (item && item.value) {
          this.activeTag = item && item.value;
        }
        // 0-特效,1-建模,2-视频,3-音频,4-图片
        this.$service
          .SquareUserMaterial({
            materialType: this.activeTag,
            size: 6,
            uuid: this.uuid,
          })
          .then((res) => {
            this.list = res.rows;
          })
          .catch((err) => {});
      },
    },
  };
</script>
<style lang="less" scoped>
  .material-comp {
    .tags {
      display: flex;
      font-size: 2.4rem;
      font-weight: 400;
      color: var(--textBrightColor);
      justify-content: space-around;
      margin-bottom: 4rem;
      .tag-item {
        width: 10rem;
        height: 4.7rem;
        border-radius: 2.3rem;
        text-align: center;
        line-height: 4.7rem;
        &.active {
          background: rgba(#ffffff, 0.1);
          color: #ffc304;
        }
      }
    }
  }
</style>
